<template>
    <div class="mark">
        <p class="heading">
            <span>Meet</span>
            <span>SPORT</span>
            <br>
            <span>Disgnostices</span>
        </p>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';

const mark = ref(null);
onMounted(() => {
    mark.value = gsap.utils.selector(".mark")
    const tl = gsap.timeline({
        defaults: {
            ease: 'power2.in'
        },
        onStart:()=>{
            document.documentElement.style.overflow = 'hidden';
        },
        onComplete:()=>{
            document.documentElement.style.overflow = '';
        }
    })
    tl.to(mark.value("span"),{
        duration:1,
        yPercent:-200,
        opacity:0,
        stagger:0.1
    },1).to(".mark",{
        yPercent:-100,
        duration:0.2
    })
})

</script> 
<style scoped>
.mark{
    background-color: black;
    position: absolute;
    inset: 0;
    z-index: 100;
}
.heading{
    color: #fafafa;
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%); 
    font-size: 10vw;
    span{
        display: inline-block;
    }
}


</style>